<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <!-- <link rel="stylesheet" href="css/login.css"> -->
    <link rel="stylesheet" href="css/reg.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer" style="width: 77%;"></span>
        <a href="blog_list.html">主页</a>
        <a href="javascript:logout()">注销</a>
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>修改密码</h3>
            <div class="row">
                <!-- <span>用户名</span> -->
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="row">
                <!-- <span>密码</span> -->
                <input type="password" id="password" placeholder="请输入新密码">
            </div>
            <div class="row">
                <!-- <span>确认密码</span> -->
                <input type="password" id="password2" placeholder="请输入确认密码">
            </div>
            <div class="row" id="yzm">
                <input type="text" id="yzmConfirm" placeholder="请输入验证码">
                <img src="/captcha/verify" id="verifyCode" onclick="refresh()" alt="验证码" />
            </div>
            <div class="row">
                <button id="submit" onclick="mymodify()">提交</button>
            </div>
        </div>
    </div>
<script>
    /* 刷新验证码 */
    function refresh() {
            // 加上一个time 防止服务器任务多次请求是同一个请求 random同理
            // document.getElementById("verifyCode").src = "/img/get?time=" + new Date().getTime();
             document.getElementById("verifyCode").src = "/captcha/verify?time=" + Math.random();

        }
    function mymodify(){
        var username = jQuery("#username");
        var password = jQuery("#password");
        var password2 = jQuery("#password2");
        var captchaCode = jQuery("#yzmConfirm");

        if(username.val().trim() ==""){
            alert("请输入用户名!");
            username.focus();
            return false;
        }
        if(password.val().trim() ==""){
            alert("请输入新密码!");
            password.focus();
            return false;
        }
        if(password2.val().trim() ==""){
            alert("请输入确认密码!");
            password2.focus();
            return false;
        }
        if(password.val() != password2.val()){
            alert("两次密码不一致!");
            password2.focus();
            return false;
        }
        if(captchaCode.val().trim() == "" ){
            alert("请输入验证码！");
            yzmConfirm.focus();
            return false;
        }
        //2.设置提交按钮为不可用 防止多次提交
        jQuery("#submit").attr("disabled","disabled");
        //3.把当前页面数据交给后端
        jQuery.ajax({
            url:"/captcha/checkCaptcha",
            type:"POST",
            data:{
                "captchaCode":captchaCode.val().trim()
            },
            success:function(res){
                if(res.code == 200 && res.data == 1){
                    jQuery.ajax({
                        url:"/user/modify",
                        type:"POST",
                        data:{
                            "username":username.val().trim(),
                            "password":password.val().trim(),
                            "captchaCode":captchaCode.val().trim() 
                        },
                        success:function(res){
                            if(res.code == 200 && res.data == 1){
                                alert("修改成功！")
                                location.href="login.html";
                            }else{
                                alert("修改失败:"+res.msg);
                                jQuery("#submit").removeAttr("disabled");
                            }
                        }
                    });
                  
                }else{
                    alert("验证码错误！");
                    jQuery("#submit").removeAttr("disabled");
                    return false;
                }
            }
        });
        
        //4.根据后端返回的结果  处理后序流程
        
        
    }
</script>
</body>

</html>